<template>
	<div class="best-selling">
		<div class="nav-head">
			<router-link to="/album"><img src="../../../../assets/icon-return45.png"></router-link>
			<div class="title">畅销榜</div>
		</div>
		<div class="top-blank"></div>
		<div class="best-selling-wraper">
			<div class="best-selling-nav">
				<span :class="{'active':showToday}" @click="ShowToday">今日排行</span>
				<span :class="{'active':showWeek}" @click="ShowWeek">本周排行</span>
				<span :class="{'active':showTotal}" @click="ShowTotal">累计排行</span>
			</div>
			<div class="best-selling-list">
				<div class="best-selling-info">
					<div class="img"><img src="../../../../assets/best-selling-jay.png"></div>
					<div class="info">
						<p class="title">周杰伦的床边故事</p>
						<p class="singer">周杰伦</p>
						<p class="count"><span>112.61</span>万张</p>
					</div>
					<div class="rank">1</div>
					<div class="buy-btn">购买</div>
				</div>
				<div class="best-selling-info">
					<div class="img"><img src="../../../../assets/best-selling-jay.png"></div>
					<div class="info">
						<p class="title">周杰伦的床边故事</p>
						<p class="singer">周杰伦</p>
						<p class="count"><span>112.61</span>万张</p>
					</div>
					<div class="rank">2</div>
					<div class="buy-btn">购买</div>
				</div>
				<div class="best-selling-info">
					<div class="img"><img src="../../../../assets/best-selling-jay.png"></div>
					<div class="info">
						<p class="title">周杰伦的床边故事</p>
						<p class="singer">周杰伦</p>
						<p class="count"><span>112.61</span>万张</p>
					</div>
					<div class="rank">3</div>
					<div class="buy-btn">购买</div>
				</div>
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
	import musicPlayer from '../../../../components/music_player'
	export default{
		name:"bestSelling",
		data(){
			return{
				showToday:false,
				showWeek:false,
				showTotal:true
			}
		},
		components:{
			musicPlayer
		},
		methods:{
			ShowToday(){
				this.showToday = true;
				this.showWeek = false;
				this.showTotal = false;
			},
			ShowWeek(){
				this.showToday = false;
				this.showWeek = true;
				this.showTotal = false;
			},
			ShowTotal(){
				this.showToday = false;
				this.showWeek = false;
				this.showTotal = true;
			}
		}
	}
</script>
<style scoped lang="less">
.top-blank{
	width: 100%;
	height: 428 / 100rem;
}
.blank{
	width: 100%;
	height: 108 / 100rem;
	background-color: #fff;
}
.nav-head{
	width: 100%;
	height: 428 / 100rem;
	background: url('../../../../assets/best-selling-pic1.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	.title{
		font-size: 96 / 100rem;
		text-align: center;
		margin-top: 152 / 100rem;
		color: #fff;
	}
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}	
.best-selling-wraper{
	position: relative;
	z-index: 11;
	width: 100%;
	background-color: #fff;
	.best-selling-nav{
		overflow: hidden;
		margin-bottom: 17 / 100rem;
		span{
			float: left;
			width: 33.33%;
			text-align: center;
			padding-top: 32 / 100rem;
			padding-bottom: 10 / 100rem;
			border-bottom: 4 / 100rem solid #fff;
		}
		.active{
			color:#c995f5;
			border-bottom: 4 / 100rem solid #c995f5;
		}
	}
	.best-selling-list{
		width: 100%;
		.best-selling-info{
			width: 100%;
			overflow: hidden;
			position: relative;
			margin-bottom: 34 / 100rem;
			div{
				float: left;
			}
			.img{
				width: 240 / 100rem;
				img{
					width: 100%;
				}
			}
			.info{
				margin-left: 10 / 100rem;
				font-size: 24 / 100rem;
				.title{
					margin-top: 54 / 100rem;
					padding-bottom: 19 / 100rem;
				}
				.singer{
					padding-bottom: 17 / 100rem;
				}
			}
			.rank{
				position: absolute;
				width: 100 / 100rem;
				top: 76 / 100rem;
				right: 20 / 100rem;
				color: #c995f5;
				text-align: center;
				font-size: 60 / 100rem;
			}
			.buy-btn{
				position: absolute;
				width: 100 / 100rem;
				height: 50 / 100rem;
				box-sizing: border-box;
				border: 2 / 100rem solid #333;
				text-align: center;
				line-height: 50 / 100rem;
				right: 20 / 100rem;
				bottom: 0 ;
				border-radius: 18 / 100rem;
			}
		}
	}
}
</style>